<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title></title>
        <style>
        table{
            width: 600px;
            border: 2px solid orangered;
            text-align: center;
        }
        thead{
            background: orangered;
        }
        img{
            width: 100px;
            height: 100px;
        }
        .active{
            background: orange;
            font-size: 20px;
            color: red;
        }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
       <div id="app">
           <!--v-once初始值不随数据的改变而改变-->
           <p v-once>初始值：{{msg}}</p>
           <p>后面的：{{msg}}</p>
           <input type="text" v-model="msg">
           <!--v-if用法-->
           <p v-if="show">显示出来</p>
           <p v-if="hide">不能显示出来</p>
           <p v-if="height > 1.65">小明的身高：{{height}}m</p>
           <p v-if="height1 > 1.65">小明的身高：{{height1}}m</p>
           <!--v-show用法-->
           <p v-show="show">show指令显示出来</p>
           <!--v-if与v-show的区别是前者如果不符合条件的话会用注释来替换掉，后者日过不符合会设置为display:none;-->
           <!--如果说需要频繁的对某一个div进行显示隐藏操作，用v-show比较好，条件不大可能发生变化时用v-if比较好-->
           <!--v-else用法-->
           <p v-if="height > 1.7">二哈的身高是：{{height}}m</p>
           <p v-else>二哈的身高是：{{height1}}m</p>
           <!--v-else-if的用法-->
           <p>输入的成绩的等级是</p>
           <p v-if="score >= 90">优秀</p>
           <p v-else-if="score <= 90 && score > 70">良好</p>
           <p v-else-if="score <= 70 && score >= 60">及格</p>
           <p v-else>不及格</p>
           <input type="text" v-model="score">
           <!--v-for的用法-->
           <p v-for="(score , index) in scores">
               {{index+1 + ':' + score}}
           </p>
           <p v-for="d in dog">   <!--不需要index的话可以写成这种方式-->
               {{d}}
           </p>
           <p v-for="s in string">   <!--遍历字符串或者数字-->
               {{s}}
           </p>
           <!--v-for示例-->
           <table>
               <thead>
                   <tr>
                       <td>姓名</td>
                       <td>年龄</td>
                       <td>性别</td>
                   </tr>    
                </thead>
                <tbody>
                    <tr v-for="item in tables">
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.sex}}</td>
                    </tr>
               </tbody>
           </table>
           <!--v-text的用法-->
           <p v-text="msg">v-text可以覆盖这里边的文本</p>
           <!--v-html的用法-->
           <div v-html="html">内部元素全部被覆盖掉</div>
           <!--v-bind的用法-->
           <img v-bind:src="img" alt="">或者
           <img :src="img" alt="">
           <p v-for="(collage , index) in collages" :class="index ===activeIndex ? 'active':''">
               {{collage}}
           </p>
           <p :style="{color: co}">{{re}}</p>
           <!--v-on的用法-->
           <p :style="{color: co}">{{re}}</p>
           <button v-on:click="re='好热呀'">改变内容</button>
           <button @click="changetext()">输出</button>
       </div>
    </body>
</html>
<script>
    //1.创建vue实例
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'你好，世界！',
            show:true,
            hide:false,
            height:1.68,
            height1:1.50,
            score:90,//优秀，良好，及格，不及格
            scores:[10,20,30,40],
            dog:{name:'哈士奇',age:5},
            string:'zifu',
            tables:[
                {name:'张三',age:13,sex:'男'},
                {name:'李四',age:14,sex:'男'},
                {name:'王五',age:15,sex:'女'},
            ],
            html:'<input type="date"><input type="color">',
            img:'img/1.png',
            collages:['第一个','第二个','第三个'],
            activeIndex:1,
            co:'red',
            re:'今天好热'
        },
        methods:{//实例的所有函数实现
            changetext(){
                //alert(1)
                this.re='测试改掉没有'
            }
        }
    })
</script>